<template>
  <simple-layout title="代入">
    <div class="content" >
      <div class="pay-online">
        <div class="pay-online-top">
          <span>代入NGT</span>
          <span>充值积分&nbsp;</span>
        </div>
        <div class="pay-online-bottom">¥ 4000</div>
      </div>

      <div class="pay-money">
        <div class="pay-wen">充值数量:</div>
        <div class="pay-money-number">
          <span v-for="item in payMoney" :key="item.value" :class="[item.checked? 'isChecked' : '']" @click="moneyChange(item)">{{item.value}}</span>
        </div>
        <!-- <div class="pay-wen">其他充值数量:</div> -->
         <div class="mui-input-row" style="border-bottom: 1px solid #7C86A1;">
                 <label style="font-size: 12px;">其他充值数量: </label>
                 <input type="number" class="mui-input-password" placeholder="请输入充值数量">
             </div>
 <div class="mui-input-row" style="border-bottom: 1px solid #7C86A1;">
                 <label style="font-size: 12px;">交易流水号: </label>
                 <input type="number" class="mui-input-password" placeholder="请输入交易流水号">
             </div>
      </div>

      <div>
        <button type="button" class="ab-btn ab-btn-primary" @click="rechargeMoney">申请代入</button>
      </div>
    </div>

  </simple-layout>
</template>


<script>
  import AuthService from '../../service/auth';
  import SimpleLayout from '../../components/SimpleLayout';

  export default {
    name: "Login",
    components: {
      //someComponent
      SimpleLayout
    },
    props: {},
    data() {
      return {
        msg: "Hello Vue.js",
        phone: '',
        code: '',
        paynum:'',
        numCode: '发送验证码',
        payMoney: [{
          value: 1000,
          label: 1000,
          checked: false,
        },{
          value: 5000,
          label: 5000,
          checked: false,
        },{
          value: 10000,
          label: 10000,
          checked: false,
        },{
          value: 20000,
          label: 20000,
          checked: false,
        },{
          value: 30000,
          label: 30000,
          checked: false,
        },{
          value: 40000,
          label: 40000,
          checked: false,
        },{
          value: 50000,
          label: 50000,
          checked: false,
        },{
          value: 60000,
          label: 60000,
          checked: false,
        },]
      }
    },
    computed: {},
    watch: {},
    mounted: function () {
    },
    methods: {
      // 点击充值
      rechargeMoney() {

      },
      //  选中金额变换
      moneyChange(value) {
        console.log(value);
        this.payMoney.forEach((item) => {
          this.$set(item, 'checked', false);
          if (item.value === value.value && item.label === value.label) {
            this.$set(item, 'checked', true);
          }
        })
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  height: 100vh;
  background-color: #fff;
}
  .ab-btn-primary {
    margin-top: 22px;
    width: 80%;
    height: 40px;
    color: white;
    background: rgb(130, 130, 244);
    border-radius: 15px;
    border: 0;
    font-size: 24px;
  }
  .pay-money{
    padding: 2rem 2rem 2rem;
    background: #fff;
    /* border: 1px solid #ccc; */
    text-align: initial;
    font-size: 20px;
  }

  .pay-online{
    background: rgb(130, 130, 244);
    color: #fff;
    text-align: initial;
  }

  .pay-online-top{
    display: flex;
    justify-content: space-between;
    padding: 2rem 2rem 2rem;
    font-size: 20px;
  }
  .pay-online-bottom{
    padding: 0 2rem 3rem;
    font-size: 35px;
    font-weight: bold;
  }
  .pay-money-number>span{
    border: 1px solid #ccc;
    display: inline-block;
    width: 30%;
    font-weight: bold;
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    margin-right: 5%;
    margin-top: 1rem;
    background: #fff;
  }
  .pay-money-number>span:last-child{
    margin-bottom: 2.5rem;
  }
  .pay-money-number>span:nth-child(3n){
    margin-right: 0;
  }
  .pay-money-number>span.isChecked{
    color: rgb(130, 130, 244);
    border: 1px solid rgb(130, 130, 244);
  }
  .pay-wen{
    font-size: 20px;
    font-weight: bold;
  }

</style>
